<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-06-10 14:37:36
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-23 17:22:01
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\linePatrol\LssuePlan\components\facTaskList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { unref, watch, computed, ref } from 'vue'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useSecurCheckStore } from '@/store/modules/securcheck'
import SetSecurCheckApi from '@/api/securcheck/SetSecurCheck'
import { Search } from '@/components/Search'
import { GroupListType } from '@/api/securcheck/type'
import UserDetail from './UserDetail.vue'
import { UserCrudSchemas } from '../../TransferComponent/index'
const SecurCheckStore = useSecurCheckStore()
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await SetSecurCheckApi.GetGroupSelectList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      taskId: SecurCheckStore.UserGroupId,
      groupUserCom: 0
    })
    return {
      list: res.rows,
      total: res.total
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const recorders = computed(() => SecurCheckStore.UserGroupId)
watch(recorders, () => {
  getList()
})
const { t } = useI18n()
const schema = [
  {
    field: 'action',
    label: t('tableDemo.action'),
    width: 150,
    fixed: 'right',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          return (
            <>
              <span class="TableBtn color-[#409eff]" onClick={() => action(data.row)}>
                {t('查看')}
              </span>
            </>
          )
        }
      }
    }
  }
]
const res = UserCrudSchemas.concat(schema)
const { allSchemas } = useCrudSchemas(res)
console.log(allSchemas)
const dialogVisible = ref(false)
const currentRow = ref<GroupListType>({})
const action = (data: GroupListType) => {
  currentRow.value = data
  dialogVisible.value = true
}
</script>

<template>
  <ContentWrap :title="t('用户列表')">
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      row-key="uuid"
      :loading="loading"
      :pagination="{
        total: total,
        pageSize: pageSize
      }"
      @register="tableRegister"
    />
    <Dialog v-model="dialogVisible" title="用户详情">
      <UserDetail
        ref="UserDetailRef"
        :current-row="currentRow"
        :detail-schema="allSchemas.detailSchema"
      />
      <template #footer>
        <BaseButton type="primary" click="dialogVisible = false">
          {{ t('确定') }}
        </BaseButton>
        <BaseButton @click="dialogVisible = false">{{ t('关闭') }}</BaseButton>
      </template>
    </Dialog>
  </ContentWrap>
</template>
